<!DOCTYPE html>
<html>
<head lang="en">
    <include file="Public/head" />
    <link rel="stylesheet" href="__PUBLIC__/Home/static/css/swiper.min.css"/>
    <link rel="stylesheet" href="__PUBLIC__/Home/static/css/event.css"/>
</head>
<body>
    <include file="Public/header" />
    <div class="banner"></div>
    <div class="banner1">
        <div class="button">
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <assign name="index" value="1"/>
                <volist name="matches" id="match">
                    <div class="swiper-slide" data-num="{$index++}">
                        <a href="{:U('Match/races', array('id' => $match['id']))}">
                            <div class="event-info">
                                <div>{$match.title}</div>
                            </div>
                            <img src="{$match['cover']|default="default.jpg"}" alt="{$match.title}"/>
                        </a>
                    </div>
                </volist>
            </div>
            <div class="swiper-pagination" style="display: none"></div>
        </div>
    </div>
    <div class="main-box">
        <div class="main">
            <div class="main-left">
                <div class="main-left-box">
                    <div class="left-title">
                        <i class="event-icon"></i>
                        <p>全部赛事</p>
                    </div>
                    <div class="event-list">
                        <volist name="matches" id="match">
                            <div class="event-list-item">
                                <a href="{:U('Match/races', array('id' => $match['id']))}">
                                    <div class="item-title">{$match.title}</div>
                                    <img src="{$match['cover']|default="default.jpg"}" alt="{$match.title}"/>
                                </a>
                            </div>
                        </volist>
                    </div>
                </div>
            </div>
            <div class="main-right">
                <div class="main-right-box">
                    <div class="right-box-title">
                        <div class="hot">
                            <i class="hot-icon"></i>
                            <p>热门赛事</p>
                        </div>
                        <div class="pre">
                            <i class="pre-icon"></i>
                            <p>赛事预告</p>
                        </div>
                        <div class="qiehuan"></div>
                    </div>
                    <!--类item-box为热门赛事-->
                    <div class="event-hot">
                    <notempty name="hotData">
                        <volist name="hotData" id="hot">
                            <div class="item-box">
                                <div class="item-box-title">{$hot.date}</div>
                                <div class="item-box-list">
                                    <volist name="hot.list" id="match">
                                        <div class="right-item">
                                            <a href="{:U('share/match', array('id' => $match['races'][0]))}">
                                                <div class="right-item-head">
                                                    <div class="game-logo">
                                                        <img src="{$match['cover'] ? $match['cover'] : $match['match']['cover']}" alt="{$match.title}"/>
                                                    </div>
                                                    <div class="game-info">
                                                        <span class="game-title">{$match.game.name} {$match.match.title}</span>
                                                        <span class="game-time game-time1">{$match.race_hour}</span>
                                                        <span class="game-time game-time2"></span>
                                                    </div>
                                                </div>
                                            </a>
                                            <div class="right-item-content">
                                                <div class="right-team1">
                                                    <div class="right-team1-logo">
                                                        <img src="{$match['team'][0]['logo']}" alt="{$match['team'][0]['name']}"/>
                                                    </div>
                                                    <div class="team-name1">{$match['team'][0]['name']}</div>
                                                </div>
                                                <div class="game-score ">
                                                    <div class="score-num">
                                                        <a class="num1">{$match['score'][0]}<div class="hr"></div></a>
                                                        <a class="num">:</a>
                                                        <a class="num2">{$match['score'][1]}<div class="hr"></div></a>
                                                    </div>
                                                    <div class="schedule">
                                                        <foreach name="match.races" item="vo" key="k">
                                                            <if condition="$k egt 3">
                                                                <a href="{:U('share/match', array('id' => $match['races'][0]))}">...</a>
                                                            <else />
                                                                <a href="{:U('share/match', array('id' => $vo))}">{$k+1}</a>
                                                            </if>
                                                        </foreach>
                                                    </div>
                                                </div>
                                                <div class="right-team2">
                                                    <div class="right-team1-logo">
                                                        <img src="{$match['team'][1]['logo']}" alt="{$match['team'][1]['name']}"/>
                                                    </div>
                                                    <div class="team-name1">{$match['team'][1]['name']}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </volist>
                                </div>
                            </div>
                        </volist>
                    <else />
                        <!--类null-state为空状态-->
                        <div class="null-state item-box">
                            <img src="__PUBLIC__/Home/static/images/null3.png" alt=""/>
                            <p>暂时没有赛事</p>
                        </div>
                    </notempty>
                    </div>
                    <!--类item-box1为赛事预告-->
                    <div class="event-yugao" style="display: none;">
                    <notempty name="previewData">
                        <volist name="previewData" id="preview">
                            <div class="item-box1">
                                <div class="item-box-title">{$preview.date}</div>
                                <div class="item-box-list">
                                    <volist name="preview.list" id="match">
                                        <div class="right-item">
                                            <div class="right-item-head">
                                                <div class="game-logo">
                                                    <img src="{$match['cover'] ? $match['cover'] : $match['match']['cover']}" alt="{$match.title}"/>
                                                </div>
                                                <div class="game-info">
                                                    <span class="game-title">{$match.game.name}</span>
                                                    <span class="game-time game-time1"></span>
                                                    <span class="game-time game-time2"></span>
                                                </div>
                                            </div>
                                            <div class="right-item-content">
                                                <div class="right-team1">
                                                    <div class="right-team1-logo">
                                                        <img src="{$match['team'][0]['logo']}" alt="{$match['team'][0]['name']}"/>
                                                    </div>
                                                    <div class="team-name1">{$match['team'][0]['name']}</div>
                                                </div>
                                                <div class="game-score ">
                                                    <div class="score-title">比赛时间</div>
                                                    <div class="score-num">
                                                        <a class="num1">{:split(':', $match['race_hour'])[0]}</a>
                                                        <a class="num">:</a>
                                                        <a class="num2">{:split(':', $match['race_hour'])[1]}</a>
                                                    </div>
                                                </div>
                                                <div class="right-team2">
                                                    <div class="right-team1-logo">
                                                        <img src="{$match['team'][1]['logo']}" alt="{$match['team'][1]['name']}"/>
                                                    </div>
                                                    <div class="team-name1">{$match['team'][1]['name']}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </volist>
                                </div>
                            </div>
                        </volist>
                    <else />
                        <!--类null-state为空状态-->
                        <div class="null-state item-box1">
                            <img src="__PUBLIC__/Home/static/images/null3.png" alt=""/>
                            <p>暂时没有预告</p>
                        </div>
                    </notempty>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <include file="common/footer" />
</body>
<script src="__PUBLIC__/Home/static/js/swiper.jquery.min.js"></script>
<script src="__PUBLIC__/Home/static/js/event.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
//        direction : 'horizontal',
        pagination : '.swiper-pagination',
        paginationType: 'fraction',
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',
        slidesPerView: 4,
        spaceBetween: 16,
        loopAdditionalSlides : 1,
        loop:true,
        autoplay : 5000,
        onSlideChangeStart: function (swiper) {
            var index=$(".swiper-pagination-current").text();
            var imgSrc=$("div[data-num="+index+"]").find("img").attr("src");
            $(".swiper-slide").removeClass("active");
            $("div[data-num="+index+"]").addClass("active");
            $(".banner").css({"background":"url("+imgSrc+")","background-size":"100% auto","background-position-y":"55%"});
        }
//        freeMode: true
    });

</script>
</html>